<template>
  <div class="mine-page-container content-width clearfix">
    
    <!-- 左侧栏 -->
    <div class="left-container ">
      <!-- 个人基本信息 -->
      <div class="base-info">
        <el-avatar
          class="avatar"
          icon="el-icon-user-solid"
          size="large"
          shape="circle"
          :src="avatar"
          fit="fill"
        ></el-avatar>
        <div>
          <span>{{ account }}</span>
        </div>
        <span class="level-box">{{  }}</span>
        <!-- <el-button type="primary" size="default" @click="testBtn"></el-button> -->
      </div>
      <!-- 导航栏 资源动态 -->
      <div class="navigation-block">
        <div class="navigation-item">
          <router-link
            :to="{ name: 'ResourceMoment' }"
            class="navigation-item-content"
            >资源动态</router-link
          >
        </div>
      </div>
      <!-- 导航栏 我的会员等 -->
      <div class="navigation-block">
        <div class="navigation-item">
          <el-menu
            default-active="2"
            router
            class="el-menu-vertical-demo"
          >
            <el-menu-item index="/mine/member">
              <!-- <el-icon><icon-menu /></el-icon> -->
              <span>我的会员</span>
            </el-menu-item>
            <el-menu-item index="/mine/wallet">
              <span>我的钱包</span>
            </el-menu-item>
            <el-menu-item index="/mine/coupons">
              <span>我的优惠券</span>
            </el-menu-item>
            <el-menu-item index="/mine/order">
              <span>我的订单</span>
            </el-menu-item>
            <!-- <el-menu-item index="/mine/sell">
              <span>我的出售</span>
            </el-menu-item> -->

            <el-sub-menu index="/mine/sell">
              <template #title>
                <el-icon><location /></el-icon>
                <span>我的出售</span>
              </template>
              <el-menu-item class="third-router-link" index="/mine/sell/orders">订单管理</el-menu-item>
              <el-menu-item index="/mine/sell/goods">商品管理</el-menu-item>
              <el-menu-item index="/mine/sell/customers">客户管理</el-menu-item>
              <el-menu-item index="/mine/sell/pay">待收款</el-menu-item>
              <el-menu-item index="/mine/sell/discount">优惠管理</el-menu-item>
              <el-menu-item index="/mine/sell/evaluate">评价管理</el-menu-item>
              <el-menu-item index="/mine/sell/deposit">保证金</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>
      </div>
      <!-- 导航栏 我的资料 -->
      <div class="navigation-block">
        <div class="navigation-item">
          <router-link :to="{ name: 'MyInfo' }" class="navigation-item-content"
            >我的资料</router-link
          >
        </div>
      </div>
    </div>
    <!-- 右侧栏 -->
    <div class="right-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Mine",
});
</script>

<script setup lang="ts">
import { useMineStore } from "@/store/mine/mine";
import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
const mineStore = useMineStore();

const { data } = storeToRefs(mineStore);
const account = ref<string>()
const avatar = ref<string>()

onMounted(() => {
  console.log("onMounted");
  console.log('data',data);
  mineStore.getUsers().then(
    () => {
      console.log(mineStore.data?.account)
      account.value = mineStore.data?.account
      avatar.value = mineStore.data?.avatar
    }
    // console.log('getUsers success'),
    
  )
});




</script>

<style scoped lang="less">
.content-width {
  background-color: #f5f7f9;
  width: 1200px;
  margin: 0 auto;
}
.mine-page-container {
  margin-top: 20px;
  .left-container {
    background-color: #f5f7f9;
    float: left;
    margin-right: 10px;
    width: 170px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .base-info {
      padding: 21px 0;
      text-align: center;
      background: #fff;
      border-radius: 4px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      .avatar {
        margin: 0 auto;
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        background-color: #eee;
        background-size: cover;
        background-position: 50%;
        background-repeat: no-repeat;
        border: solid 1px #f5f7f9;
        // outline:black 5px;
        box-shadow: 1px black;
      }
      .level-box {
        background: linear-gradient(#ff289b, #ff43d0);
        border: 1px solid #fff;
        border-radius: 4px;
        padding: 0 8px;
        display: inline-block !important;
        line-height: 1.15;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    // 导航
    .navigation-block {
      background: #fff;
      border-radius: 4px;
      padding: 5px 0;
      margin-bottom: 10px;
      .navigation-item {
        .navigation-item-content {
          font-size: 14px;
          color: #111;
          padding: 17px 21px;
          cursor: pointer;
          position: relative;
          display: block;
          text-decoration: none;
        }
      }
    }
  }
  .right-container {
    float: left;
    width: 1020px;
  }
}

// 路由选择状态
.router-link-active{
  border-left: 5px solid red;
}
</style>
